<template>
  <div>
    <el-row style="margin: 10px 0;">
      <el-col :sm="6">
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-col>
      <el-col :sm="18">
        <div class="account-search">
          <div class="account-input">
            <el-input v-model="input2" :placeholder="valueName">
              <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin: 10px 0;">
      <el-col :sm="4">
        <div class="g-title">出车单数目({{total}}个）</div>
      </el-col>
      <el-col :sm="20" style="text-align:right;padding: 5px 0 0 0;">
        <el-button type="primary" @click="print" size="small">打印</el-button>
      </el-col>
    </el-row>

    <div class="table-top">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="procid" label="订单号" width="80" align="center"></el-table-column>
        <el-table-column prop="applyUserName" label="申请人" width="200" align="center"></el-table-column>
        <el-table-column prop="applyCompanyName" label="所属单位" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="carcode" label="车牌号" width="200" align="center"></el-table-column>
        <el-table-column prop="driverName" label="司机" width="100" align="center"></el-table-column>
        <el-table-column prop="fctime" label="出车时间" width="200" align="center"></el-table-column>
        <el-table-column prop="endtime" label="结束时间" width="200" align="center"></el-table-column>
        <el-table-column prop="taskname" label="订单状态" width="100" align="center"></el-table-column>
        <el-table-column prop="download" label="查看" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="see(scope.$index,scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row style="padding: 32px 16px;">
        <el-col>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="pageSize"
            :total="total"
            :current-page="pageNo"
            @current-change="fetchData"
            @size-change="pageSizeChange"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
    <see :dialogVisible.sync="dialogVisible3" :data="articleIdData"></see>
    <print :dialogVisible.sync="dialogPrint" :data="printData"></print>
  </div>
</template>
<script>
import { orderListJson, orderJson } from "@/api/vehicle";
import quill from "@/components/quill/index";
import { axios } from "@/api/axios";
import See from "./components/see";
import print from "./components/print";
// 引入vuex
import { mapGetters } from "vuex";
export default {
  computed: {
    //获取左侧单位勾选的id数组 [1,2,3]
    ...mapGetters(["userInfo", "selectedComIds"]),
  },
  components: {
    quill,
    See,
    print,
  },
  data() {
    return {
      valueName: "请输入车牌号，司机 ，单位",
      titleNode: "文件数目",
      rolesNode: false, //单位权限只有管理员和单位管理员可以为true
      tableData: [],
      value1: "",
      editData: {},
      printData: [],
      printListData: [],
      loginname: "",
      companyId: null, //单位id
      comid: null, //用户id
      userid: null, //用户id
      seeYes: null,
      articleIdData: {},
      multipleSelection: [],
      multipleSelection2: [],
      input2: "",
      currentPage: 1, //默认显示第一页
      total: 0,
      pageNo: 1,
      pageSize: 10, //默认每页显示10条

      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogPrint: false,
      starttime: "",
      endtime: "",

      input2: "", //搜索数据
    };
  },
  watch: {
    //监听左侧单位勾选 重新获取数据
    selectedComIds() {
      this.pageNo = 1;
      this.fetchData();
    },
  },
  created() {
    this.total = this.tableData.length;
    this.comid = this.userInfo.comid;
    this.userid = this.userInfo.userid;
    this.loginname = this.userInfo.loginname;
    this.fetchData();
    this.roles();
  },
  methods: {
    handleClose(done) {
      done();
    },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },
    roles() {
      if (this.userInfo.usertype == 1) {
        this.rolesNode = true;
      } else {
        this.userInfo.rolesName.forEach((e) => {
          if (e == "dwgly") {
            this.rolesNode = true;
          }
        });
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    search() {
      // alert(this.value1);
      this.starttime = this.value1[0];
      this.endtime = this.value1[1];
      this.fetchData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 富文本
    textChange(d) {
      this.ruleForm.text = d;
    },
    xuanze() {
      this.dialogVisible2 = true;
    },
    async fetchData(index, row) {
      console.log(this.value1);
      let parameter = {
        starttime: this.starttime,
        endtime: this.endtime,
        key: this.input2,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };

      let data = await orderListJson(parameter);
      if (data.data==undefined) {
        this.total = 0;
      } else {
        this.tableData = data.data;
        this.total = data.total;
      }
    },
    //  查看当前的数据
    async see(index, row) {
      let parameter = {
        tableId: row.id,
      };
      let data = await orderJson(parameter);
      data.data[0].tasks.forEach(function (e, inx) {
        if (e.taskName == "一级单位审批") {
          data.data[0].shenhe = e;
        } else if (e.taskName == "二级单位审批") {
          data.data[0].shenpi = e;
        } else if (e.taskName == "车辆调度") {
          data.data[0].diaoduLiuchen = e;
        }
      });

      let feiyong = {
        fy: row.fy,
        tcf: row.tcf,
        qtf: row.qtf,
      };
      data.data[0].feiyong = feiyong;
      data.data[0].procid = row.procid;
      this.articleIdData = data.data[0];
      // console.log(this.articleIdData);
      this.dialogVisible3 = true;
    },

    modify() {
      if (this.multipleSelection.length == 0) {
        this.$message("请选择");
        return;
      }
      this.editData = {
        id: this.multipleSelection[0].id,
        title: this.multipleSelection[0].title,
        titleNode: this.multipleSelection[0].simpledetails,
        companyName: this.multipleSelection[0].companyName,
        createtime: this.multipleSelection[0].createtime,
        fjname: this.multipleSelection[0].fjname,
        fujianurl: this.multipleSelection[0].fujianurl,
        allcom: "",
        textdetails: "",
        // textdetails: this.multipleSelection[0].textdetails
      };
      // console.log(this.editData)
      this.addMode = false;
      this.dialogVisible = true;
    },
    //单条打印
    async print() {
      if (this.multipleSelection.length == 0) {
        this.$message("请选择数据");
        return;
      }

      let dataId = [];
      this.multipleSelection.forEach(function (e, inx) {
        dataId.push({
          id: e.id,
          procid: e.procid,
          fy: e.fy,
          tcf: e.tcf,
          qtf: e.qtf,
        });
      });
      let nid = "";
      dataId.forEach((e) => {
        nid += e.id + ",";
      });
      nid =
        nid.substring(nid.length - 1) == ","
          ? nid.substring(0, nid.length - 1)
          : nid;
      let parameter = {
        tableId: nid,
      };
      let data = await orderJson(parameter);
      let thit = this;
      data.data.forEach(function (e, inx1) {
        e.tasks.forEach(function (e, inx2) {
          if (e.taskName == "一级单位审批") {
            data.data[inx1].shenhe = e;
          } else if (e.taskName == "二级单位审批") {
            data.data[inx1].shenpi = e;
          } else if (e.taskName == "车辆调度") {
            data.data[inx1].diaodu = e;
          }
        });
        let feiyong = {
          fy: dataId[inx1].fy,
          tcf: dataId[inx1].tcf,
          qtf: dataId[inx1].qtf,
        };
        data.data[inx1].feiyong = feiyong;
        data.data[inx1].procid = dataId[inx1].procid;
      });
      this.printData = [];
      this.printData = data.data;
      this.dialogPrint = true;
      this.$refs.multipleTable.clearSelection();
      console.log(this.printData);
    },
  },
};
</script>
<style lang="scss" scoped>
.companybook-main {
  margin: 0 auto;
  padding: 10px;
  border-radius: 4px;
  background-color: #fff;
}

.companybook-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background-color: #eef1f6;
  padding: 10px;
}

.g-title {
  height: 20px;
  padding-left: 8px;
  line-height: 22px;
  font-size: 16px;
  font-weight: 400;
  border-left: 2px solid #f54e40;
  margin: 10px 0;
  display: inline-block;
}
</style>
